<template>
	<a-collapse :bordered="false">
		<template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
		</template>
		<a-collapse-panel key="1" :header="i18n('columnSetting','柱状设置')">
			<a-row :gutter="24" style="margin: 0px">
				<a-col :span="12">
					<a-form-item :label="i18n('barWidth','宽度')">
						<a-input :placeholder="i18n('barWidth','宽度')" type="number" v-model:value="config.styles.barConfig.barWidth" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.barConfig.widthSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('radius','柱状圆角半径')" >
						<a-input placeholder="5,5,0,0" v-model:value="config.styles.barConfig.radius" ></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin: 0px">
				<a-col :span="12">
					<a-form-item :label="i18n('showData','顶部展示数据')">
						<a-switch  size="small" v-model:checked="config.styles.barConfig.showData"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('fontColor','字体颜色')">
                        <rx-color-picker v-model:value="config.styles.barConfig.fontColor" :placeholder="'请选择颜色'"></rx-color-picker>
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
	</a-collapse>
</template>

<script>
import { RxColorPicker } from '@lowcode/jpaas-base-lib';
export default {
	name: "bar-config",
    components:{
        RxColorPicker
    },
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			barConfig:{
				barWidth:"",
				widthSuffix:"px",
				radius:"",
				showData:false,
				fontColor:'#ffffff'
			}
		}
	},
	created() {
		//柱状图
		if(!this.config.styles.barConfig){
            this.config.styles["barConfig"]=this.barConfig;
		}
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"lineBarLang.barChartLang",key);
		},
	},
	watch: {}
}
</script>

<style scoped>
</style>
